<template>
    <div>
        <div v-for="item in comments" class="flex">
            <div class="author-title">
                <el-avatar class="header-img" :size="40" :src="item.userImageAddress"></el-avatar>
                <div class="author-info">
                    <span class="author-name">{{ item.userName }}</span>
                    <span class="author-time">{{ item.createTime }}</span>
                </div>
                <div class="talk-box">
                    <p>
                        <span class="reply">{{ item.commentContent }}</span>
                    </p>
                </div>
                <div class="reply-box">
                    <div v-for="value in item.commentList" class="flex">
                        <div class="author-title">
                            <el-avatar class="header-img" :size="40" :src="value.userImageAddress"></el-avatar>
                            <div class="author-info">
                                <span class="author-name">{{ value.userName }}</span>
                                <span class="author-time">{{ value.createTime }}</span>
                            </div>
                            <div class="talk-box">
                                <p>
                                    <span class="reply">{{ value.commentContent }}</span>
                                </p>
                            </div>
                        </div>
                        <div class="deleted">
                            <el-button type="text" icon="el-icon-delete" @click="deleteCommit(value)"></el-button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="deleted">
                <el-button type="text" icon="el-icon-delete" @click="deleteCommit(item)"></el-button>
            </div>
        </div>
    </div>
</template>

<script>
import { stopCommit } from '@/api/table';
export default {
    props: ['comment'],
    data() {
        return {
            btnShow: false,
            index: '0',
            replyComment: '',
            myName: 'Lana Del Rey',
            myHeader: 'https://ae01.alicdn.com/kf/Hd60a3f7c06fd47ae85624badd32ce54dv.jpg',
            myId: 19870621,
            to: '',
            toId: -1,
        }
    },
    computed: {
        comments() {
            return structuredClone(this.comment).map(item => {
                const date = new Date(item.createTime)
                item.createTime = date.toLocaleDateString().replace(/\//g, "-") + " " + date.toTimeString().substr(0, 8)
                if (Array.isArray(item.commentList)) {
                    item.commentList.map(item => {
                        const date = new Date(item.createTime)
                        item.createTime = date.toLocaleDateString().replace(/\//g, "-") + " " + date.toTimeString().substr(0, 8)
                    })
                }
                return item
            })
        }
    },
    methods: {
        inputFocus() {
            var replyInput = document.getElementById('replyInput');
            replyInput.style.padding = "8px 8px"
            replyInput.style.border = "2px solid blue"
            replyInput.focus()
        },
        deleteCommit(value) {
            const data = {
                commentId: value.commendId
            }
            stopCommit(data).then(res => {
                this.$message(res.errerrorMessage)
                this.$emit('getTable')
            })
        },
        hideReplyBtn() {
            this.btnShow = false
            replyInput.style.padding = "10px"
            replyInput.style.border = "none"
        },
        showReplyInput(i, name, id) {
            this.comments[this.index].inputShow = false
            this.index = i
            this.comments[i].inputShow = true
            this.to = name
            this.toId = id
        },
        sendComment(value) {
            this.$emit('sonSendComment', value)
        },
        _inputShow(i) {
            return this.comments[i].inputShow
        },
        sendCommentReply(i, j) {
            if (!this.replyComment) {
                this.$message({
                    showClose: true,
                    type: 'warning',
                    message: '评论不能为空'
                })
            } else {
                let a = {}
                let timeNow = new Date().getTime();
                let time = this.dateStr(timeNow);
                a.from = this.myName
                a.to = this.to
                a.fromHeadImg = this.myHeader
                a.comment = this.replyComment
                a.time = time
                a.commentNum = 0
                a.like = 0
                this.comments[i].reply.push(a)
                this.replyComment = ''
                document.getElementsByClassName("reply-comment-input")[i].innerHTML = ""
            }
        },
        onDivInput: function (e) {
            this.replyComment = e.target.innerHTML;
        },
        dateStr(date) {
            //获取js 时间戳
            var time = new Date().getTime();
            //去掉 js 时间戳后三位，与php 时间戳保持一致
            time = parseInt((time - date) / 1000);
            //存储转换值 
            var s;
            if (time < 60 * 10) {//十分钟内
                return '刚刚';
            } else if ((time < 60 * 60) && (time >= 60 * 10)) {
                //超过十分钟少于1小时
                s = Math.floor(time / 60);
                return s + "分钟前";
            } else if ((time < 60 * 60 * 24) && (time >= 60 * 60)) {
                //超过1小时少于24小时
                s = Math.floor(time / 60 / 60);
                return s + "小时前";
            } else if ((time < 60 * 60 * 24 * 30) && (time >= 60 * 60 * 24)) {
                //超过1天少于30天内
                s = Math.floor(time / 60 / 60 / 24);
                return s + "天前";
            } else {
                //超过30天ddd
                var date = new Date(parseInt(date));
                return date.getFullYear() + "/" + (date.getMonth() + 1) + "/" + date.getDate();
            }
        }
    },
}
</script>

<style scoped>
.my-comment-reply {
    margin-left: 50px;
}

.my-comment-reply .reply-input {
    width: flex;
}

.author-title:not(:last-child) {
    border-bottom: 1px solid rgba(178, 186, 194, 0.3);
}

.author-title {
    padding: 10px;
}

.author-title .header-img {
    display: inline-block;
    vertical-align: top;
}

.author-title .author-info {
    display: inline-block;
    margin-left: 5px;
    width: 60%;
    height: 40px;
    line-height: 20px;
}

.author-title .author-info>span {
    display: block;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.author-title .author-info .author-name {
    color: #000;
    font-size: 18px;
    font-weight: bold;
}

.author-title .author-info .author-time {
    font-size: 14px;
}

.author-title .icon-btn {
    width: 30%;
    padding: 0 !important;
    float: right;
}

.author-title .icon-btn>span {
    margin-right: 60px;
}

@media screen and (max-width: 1200px) {
    .author-title .icon-btn {
        width: 20%;
        padding: 7px;
    }
}

.author-title .icon-btn>span {
    cursor: pointer;
}

.author-title .icon-btn .iconfont {
    margin: 0 5px;
}

.author-title .talk-box {
    margin: 0 50px;
}

.author-title .talk-box>p {
    margin: 0;
}

.author-title .talk-box .reply {
    font-size: 16px;
    color: #000;
}

.author-title .reply-box {
    margin: 10px 0 0 50px;
    background-color: #efefef;
}

.flex {
    display: flex;
    width: 100%;
}

.flex>div:first-child {
    flex: 1;
}

.deleted {
    width: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
}

.el-button {
    font-size: 25px;
}
</style>